.ez-table-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  border: var(--ezt-t-b-width) solid var(--ezt-t-b-color);
  display: flex;
  flex-direction: column;
  cursor: default;
  overflow: hidden;
  box-sizing: border-box;
  * {
    box-sizing: border-box;
  }

  .header-container {
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 1;
    width: 100%;
    display: flex;
    overflow: hidden;
    background: var(--ezt-h-background);
    box-shadow: 0 0 var(--ezt-h-shadow-width) var(--ezt-h-shadow-color);
  }

  .header-fixed-container {
    position: sticky;
    left: 0;
    width: var(--ezt-fixed-cols-width);
    border-right: var(--ezt-h-b-width) solid var(--ezt-h-b-color);
    box-shadow: 0 0 var(--ezt-h-shadow-width) var(--ezt-h-shadow-color);
    overflow: hidden;
    z-index: 1;
  }

  .header-static-container {
    position: relative;
    flex: 1;
    z-index: 0;
    overflow: scroll;
  }

  .body-container {
    position: relative;
    flex: 1;
    z-index: 0;
    width: 100%;
    display: flex;
    overflow: hidden;
  }

  .body-fixed-container {
    position: relative;
    height: 100%;
    width: var(--ezt-fixed-cols-width);
    border-right: var(--ezt-b-b-width) solid var(--ezt-b-b-color);
    box-shadow: 0 0 var(--ezt-b-shadow-width) var(--ezt-b-shadow-color);
    overflow: scroll;
    z-index: 1;
  }

  .body-static-container {
    position: relative;
    flex: 1;
    height: 100%;
    overflow: auto;
    z-index: 0;
  }

  .header-fixed-table,
  .header-static-table,
  .body-fixed-table,
  .body-static-table {
    width: 100%;
  }

  &.striped .body-fixed-table > tbody > tr:nth-of-type(odd),
  &.striped .body-static-table > tbody > tr:nth-of-type(odd) {
    background-color: var(--ezt-b-s-color);
  }

  table {
    border-collapse: collapse;
    table-layout: fixed;
  }
  th {
    height: calc(var(--ezt-h-r-height) * var(--span, 1));
    padding-left: var(--ezt-h-c-padd-left);
    padding-right: var(--ezt-h-c-padd-right);
    text-align: var(--ezt-h-c-align);
    font-size: var(--ezt-h-c-font-size);
    border-bottom: var(--ezt-h-b-width) solid var(--ezt-h-b-color);
  }
  td {
    height: var(--ezt-b-r-height);
    padding-left: var(--ezt-b-c-padd-left);
    padding-right: var(--ezt-b-c-padd-right);
    text-align: var(--ezt-b-c-align);
    font-size: var(--ezt-b-c-font-size);
    border-bottom: var(--ezt-b-b-width) solid var(--ezt-b-b-color);
  }
  th:not(:last-child) {
    border-right: var(--ezt-h-b-width) solid var(--ezt-h-b-color);
  }
  td:not(:last-child) {
    border-right: var(--ezt-b-b-width) solid var(--ezt-b-b-color);
  }
  th,
  td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  &.hoverd tr:hover td {
    background-color: var(--ezt-b-h-color);
  }

  .header-static-container::-webkit-scrollbar {
    width: 4px;
    height: 0;
  }

  .body-fixed-container::-webkit-scrollbar {
    width: 0;
    height: 4px;
  }
  .body-static-container::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }
  .body-static-container::-webkit-scrollbar-thumb {
    background: #ced8e1;
    border-radius: 2px;
  }
}
